<template>
  <div class="message">
    <div class="container">
      <el-row>
        <el-col :span="4" class="category">
          <el-card>
            <ul ref="categoryList">
              <li class="is-active" label="ReplyComponent">
                <el-badge is-dot class="item">评论</el-badge>
              </li>
              <li label="FollowComponent">关注</li>
              <li label="FabulousComponent">点赞</li>
              <li label="NotificationComponent">
                <el-badge is-dot class="item">系统通知</el-badge>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="19" class="content">
          <component :is="tabComponent"></component>
        </el-col>
      </el-row>
    </div>
    <blog-bottom-component />
  </div>
</template>
<script>
import BlogBottomComponent from "../components/BlogBottomComponent.vue";
import ReplyComponent from "../components/ReplyComponent.vue";
import FollowComponent from "../components/FollowComponent.vue";
import FabulousComponent from "../components/FabulousComponent.vue";
import NotificationComponent from "../components/NotificationComponent.vue";
export default {
  data() {
    return {
      tabComponent: "ReplyComponent",
    };
  },
  components: {
    BlogBottomComponent,
    ReplyComponent,
    FollowComponent,
    FabulousComponent,
    NotificationComponent,
  },
  methods: {
    categoryActive() {
      let lis = this.$refs.categoryList.childNodes;
      let _this = this;
      lis.forEach((element) => {
        element.onclick = function () {
          lis.forEach((item) => {
            item.setAttribute("class", "");
          });
          _this.$nprogress.start();
          _this.tabComponent = this.getAttribute("label");
          _this.$nprogress.done();
          this.setAttribute("class", "is-active");
        };
      });
    },
  },
  mounted() {
    this.categoryActive();
  },
};
</script>
<style scoped>
.message {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 72px; /*等于footer的高度*/
  position: relative;
  display: flex;
  justify-content: center;
}
.container {
  margin: 20px 0;
  width: 60%;
}
.category {
  margin-right: 15px;
}
.category /deep/ .el-card__body {
  padding: 10px 0;
}
.category ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.category ul li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.category ul li:hover {
  background-color: rgb(239, 239, 243);
}
.category .item /deep/ .is-dot {
  position: relative;
  top: 5px;
  left: -10px;
}
.is-active {
  background-color: rgb(239, 239, 243);
}
</style>